<template>
  <div>
    <div class="top">
      <router-link to="/shop"> <span>&lt;</span></router-link>
      <span>完美日记商城</span>
    </div>
    <hr />
    <div class="dianji">
      <span @click="fun('One')">综合</span>
      <span @click="fun('Two')">销量</span>
      <span @click="fun('Three')">价格</span>
      <span @click="fun('Four')">上新</span>
    </div>
    <keep-alive> <component :is="com"></component></keep-alive>
  </div>
</template>

<script>
import One from "@/components/cou/one.vue";
import Two from "@/components/cou/two.vue";
import Three from "@/components/cou/three.vue";
import Four from "@/components/cou/four.vue";
export default {
  components: { One, Two, Three, Four },
 
  methods: {
    fun(data) {
      this.com = data;
    },
  },
  data() {
    return {
      com: "One",
    };
  },
};
</script>

<style scoped>
.top {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.2rem;
  margin-left: 0.15rem;
}
.top span:nth-child(2) {
  margin-left: 0.9rem;
  font-weight: 600;
}
.dianji {
  height: 0.35rem;
  line-height: 0.35rem;
  font-size: 0.16rem;
  display: flex;
  justify-content: space-around;
}
</style>